<template>
  <div style="height: 100%; width: 100%; padding: 15px; box-sizing: border-box">
    <div class="top1">
      <div style="margin-right: 24px">
        <el-input
          v-model="input"
          placeholder="项目名称编号"
          @input="showIcon = !!input"
        ></el-input>
        <svg
          version="1.1"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="12px"
          height="12px"
          xmlns="http://www.w3.org/2000/svg"
          style="position: absolute; left: 242px; top: 12px"
          @click="clearInput"
          v-show="showIcon"
        >
          <g transform="matrix(1 0 0 1 -274 -16 )">
            <path
              d="M 11.75541666015625 2.0670833398437507  C 12.028491928692468 1.7939012069409621  12.028491928692468 1.3510987930590401  11.75541666015625 1.0779166601562498  C 11.482234529490464 0.804841404635769  11.039432130665782 0.804841404635769  10.76625 1.0779166601562498  L 6.416666660156251 5.4275  L 2.06708333984375 1.0779166601562498  C 1.9367705122323136 0.9526600606387587  1.76303515775892 0.8827015792907824  1.5822849191345325 0.8827015792907824  C 1.1959157093031365 0.8827015792907824  0.8827015792907824 1.1959157093031365  0.8827015792907824 1.5822849191345325  C 0.8827015792907824 1.76303515775892  0.9526600606387587 1.9367705122323136  1.0779166601562498 2.06708333984375  L 5.4275 6.416666660156251  L 1.0779166601562498 10.766250000000001  C 0.9526602122750143 10.896562802585134  0.8827018259951016 11.070298048545641  0.8827018259951016 11.251048164046065  C 0.8827018259951016 11.63741737387746  1.1959159560074557 11.950631503889813  1.5822851658388517 11.950631503889813  C 1.7630352861166294 11.950631503889813  1.9367705362875647 11.880673113921148  2.06708333984375 11.755416660156252  L 6.416666660156251 7.405833339843749  L 10.766250000000001 11.75541666015625  C 10.896562778530386 11.880672962288699  11.070297920191107 11.950631257191716  11.251047917347968 11.950631257191716  C 11.637417127179365 11.950631257191716  11.950631257191718 11.637417127179363  11.950631257191718 11.251047917347966  C 11.950631257191718 11.070297920191106  11.880672962288703 10.896562778530384  11.755416660156252 10.76625  L 7.405833339843749 6.416666660156251  L 11.75541666015625 2.0670833398437507  Z "
              fill-rule="nonzero"
              fill="#222222"
              stroke="none"
              transform="matrix(1 0 0 1 274 16 )"
            />
          </g>
        </svg>
      </div>

      <el-select
        v-model="value"
        filterable
        clearable
        placeholder="项目管理员"
        style="margin-right: 26px"
        @change="handleSelectChange6"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span>{{ item.label }} ({{ item.phone }})</span>
        </el-option>
      </el-select>
      <svg
        version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="12px"
        height="12px"
        xmlns="http://www.w3.org/2000/svg"
        style="position: absolute; top: 12px; left: 602px"
        v-show="showIcon6"
        @click="clearInput6"
      >
        <g transform="matrix(1 0 0 1 -274 -16 )">
          <path
            d="M 11.75541666015625 2.0670833398437507  C 12.028491928692468 1.7939012069409621  12.028491928692468 1.3510987930590401  11.75541666015625 1.0779166601562498  C 11.482234529490464 0.804841404635769  11.039432130665782 0.804841404635769  10.76625 1.0779166601562498  L 6.416666660156251 5.4275  L 2.06708333984375 1.0779166601562498  C 1.9367705122323136 0.9526600606387587  1.76303515775892 0.8827015792907824  1.5822849191345325 0.8827015792907824  C 1.1959157093031365 0.8827015792907824  0.8827015792907824 1.1959157093031365  0.8827015792907824 1.5822849191345325  C 0.8827015792907824 1.76303515775892  0.9526600606387587 1.9367705122323136  1.0779166601562498 2.06708333984375  L 5.4275 6.416666660156251  L 1.0779166601562498 10.766250000000001  C 0.9526602122750143 10.896562802585134  0.8827018259951016 11.070298048545641  0.8827018259951016 11.251048164046065  C 0.8827018259951016 11.63741737387746  1.1959159560074557 11.950631503889813  1.5822851658388517 11.950631503889813  C 1.7630352861166294 11.950631503889813  1.9367705362875647 11.880673113921148  2.06708333984375 11.755416660156252  L 6.416666660156251 7.405833339843749  L 10.766250000000001 11.75541666015625  C 10.896562778530386 11.880672962288699  11.070297920191107 11.950631257191716  11.251047917347968 11.950631257191716  C 11.637417127179365 11.950631257191716  11.950631257191718 11.637417127179363  11.950631257191718 11.251047917347966  C 11.950631257191718 11.070297920191106  11.880672962288703 10.896562778530384  11.755416660156252 10.76625  L 7.405833339843749 6.416666660156251  L 11.75541666015625 2.0670833398437507  Z "
            fill-rule="nonzero"
            fill="#222222"
            stroke="none"
            transform="matrix(1 0 0 1 274 16 )"
          />
        </g>
      </svg>
      <!-- <svg
          version="1.1"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="16px"
          height="16px"
          xmlns="http://www.w3.org/2000/svg"
          style="position: absolute; top: 12px; left: 242px"
        >
          <g transform="matrix(1 0 0 1 -326 -206 )">
            <path
              d="M 4.800000000000011 0  L 11.199999999999989 0  C 13.888000000000034 0  16 2.1119999999999663  16 4.800000000000011  L 16 11.199999999999989  C 16 13.888000000000034  13.888000000000034 16  11.199999999999989 16  L 4.800000000000011 16  C 2.1119999999999663 16  0 13.888000000000034  0 11.199999999999989  L 0 4.800000000000011  C 0 2.1119999999999663  2.1119999999999663 0  4.800000000000011 0  Z M 5.878431370404428 9.520941176470615  C 7.047452823623132 10.689671863334638  8.942553226651341 10.689507997869498  10.111372546874975 9.520575162683826  C 10.672538855529808 8.959314145521034  10.98779084466912 8.198137688988083  10.98779084466912 7.404461712687976  C 10.98779084466912 5.751534822995836  9.647828848331812 4.411572826658585  7.99490195863973 4.411572826658585  C 6.34197506894759 4.411572826658585  5.002013072610282 5.751534822995836  5.002013072610282 7.404461712687976  C 5.002013072610282 8.198137688988083  5.317265061749595 8.959680159307823  5.878431370404428 9.520941176470615  Z M 11.4700130726103 10.877751633272055  C 11.546520052953213 10.801339921736144  11.589509244677743 10.697646204136504  11.589509244677743 10.589516339154386  C 11.589509244677743 10.481386474172325  11.546520052953213 10.377692756572685  11.4700130726103 10.301281045036774  L 10.89171241544119 9.723712415441184  C 10.81558161158074 9.650308409972183  10.713948800610922 9.609292182460877  10.60819414437617 9.609292182460877  C 10.382602067739413 9.609292182460877  10.199723556140896 9.792170694059394  10.199723556140896 10.017762770696152  C 10.199723556140896 10.12351742850484  10.240739784869902 10.225150240861012  10.314143792279424 10.301281045036774  L 10.89171241544119 10.879215688419094  C 11.051344674790016 11.038711300875946  11.310380813261474 11.037247245728906  11.4700130726103 10.877751633272055  Z M 9.611764705882365 5.787973854779409  C 10.040877702535909 6.2169334811792965  10.281963770934453 6.798819646175048  10.281963770934453 7.405568626378681  C 10.281963770934453 8.012317606582258  10.040877702535909 8.594203771578066  9.611764705882365 9.023163397977953  C 9.1827024592601 9.452152744258342  8.60081292422683 9.693150322150757  7.994078822087715 9.693150322150757  C 6.730480193688095 9.693150322150757  5.706131112528851 8.66880124099157  5.706131112528851 7.405202612591893  C 5.706131112528851 6.1416039841922725  6.730480193688095 5.117254903033086  7.994078822087715 5.117254903033086  C 8.60081292422683 5.117254903033086  9.1827024592601 5.35898450849902  9.611764705882365 5.787973854779409  Z "
              fill-rule="nonzero"
              fill="#d7d7d7"
              stroke="none"
              transform="matrix(1 0 0 1 326 206 )"
            />
          </g>
        </svg> -->

      <el-select
        v-model="value1"
        placeholder="项目状态"
        @change="handleSelectChange"
        style="margin-right: 26px"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- <svg
          version="1.1"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="16px"
          height="16px"
          xmlns="http://www.w3.org/2000/svg"
          style="position: absolute; top: 12px; left: 485px"
        >
          <g transform="matrix(1 0 0 1 -326 -206 )">
            <path
              d="M 4.800000000000011 0  L 11.199999999999989 0  C 13.888000000000034 0  16 2.1119999999999663  16 4.800000000000011  L 16 11.199999999999989  C 16 13.888000000000034  13.888000000000034 16  11.199999999999989 16  L 4.800000000000011 16  C 2.1119999999999663 16  0 13.888000000000034  0 11.199999999999989  L 0 4.800000000000011  C 0 2.1119999999999663  2.1119999999999663 0  4.800000000000011 0  Z M 5.878431370404428 9.520941176470615  C 7.047452823623132 10.689671863334638  8.942553226651341 10.689507997869498  10.111372546874975 9.520575162683826  C 10.672538855529808 8.959314145521034  10.98779084466912 8.198137688988083  10.98779084466912 7.404461712687976  C 10.98779084466912 5.751534822995836  9.647828848331812 4.411572826658585  7.99490195863973 4.411572826658585  C 6.34197506894759 4.411572826658585  5.002013072610282 5.751534822995836  5.002013072610282 7.404461712687976  C 5.002013072610282 8.198137688988083  5.317265061749595 8.959680159307823  5.878431370404428 9.520941176470615  Z M 11.4700130726103 10.877751633272055  C 11.546520052953213 10.801339921736144  11.589509244677743 10.697646204136504  11.589509244677743 10.589516339154386  C 11.589509244677743 10.481386474172325  11.546520052953213 10.377692756572685  11.4700130726103 10.301281045036774  L 10.89171241544119 9.723712415441184  C 10.81558161158074 9.650308409972183  10.713948800610922 9.609292182460877  10.60819414437617 9.609292182460877  C 10.382602067739413 9.609292182460877  10.199723556140896 9.792170694059394  10.199723556140896 10.017762770696152  C 10.199723556140896 10.12351742850484  10.240739784869902 10.225150240861012  10.314143792279424 10.301281045036774  L 10.89171241544119 10.879215688419094  C 11.051344674790016 11.038711300875946  11.310380813261474 11.037247245728906  11.4700130726103 10.877751633272055  Z M 9.611764705882365 5.787973854779409  C 10.040877702535909 6.2169334811792965  10.281963770934453 6.798819646175048  10.281963770934453 7.405568626378681  C 10.281963770934453 8.012317606582258  10.040877702535909 8.594203771578066  9.611764705882365 9.023163397977953  C 9.1827024592601 9.452152744258342  8.60081292422683 9.693150322150757  7.994078822087715 9.693150322150757  C 6.730480193688095 9.693150322150757  5.706131112528851 8.66880124099157  5.706131112528851 7.405202612591893  C 5.706131112528851 6.1416039841922725  6.730480193688095 5.117254903033086  7.994078822087715 5.117254903033086  C 8.60081292422683 5.117254903033086  9.1827024592601 5.35898450849902  9.611764705882365 5.787973854779409  Z "
              fill-rule="nonzero"
              fill="#d7d7d7"
              stroke="none"
              transform="matrix(1 0 0 1 326 206 )"
            />
          </g>
        </svg> -->
      <svg
        version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="12px"
        height="12px"
        xmlns="http://www.w3.org/2000/svg"
        style="position: absolute; left: 925px; top: 14px"
        v-show="showIcon1"
        @click="clearInput1"
      >
        <g transform="matrix(1 0 0 1 -274 -16 )">
          <path
            d="M 11.75541666015625 2.0670833398437507  C 12.028491928692468 1.7939012069409621  12.028491928692468 1.3510987930590401  11.75541666015625 1.0779166601562498  C 11.482234529490464 0.804841404635769  11.039432130665782 0.804841404635769  10.76625 1.0779166601562498  L 6.416666660156251 5.4275  L 2.06708333984375 1.0779166601562498  C 1.9367705122323136 0.9526600606387587  1.76303515775892 0.8827015792907824  1.5822849191345325 0.8827015792907824  C 1.1959157093031365 0.8827015792907824  0.8827015792907824 1.1959157093031365  0.8827015792907824 1.5822849191345325  C 0.8827015792907824 1.76303515775892  0.9526600606387587 1.9367705122323136  1.0779166601562498 2.06708333984375  L 5.4275 6.416666660156251  L 1.0779166601562498 10.766250000000001  C 0.9526602122750143 10.896562802585134  0.8827018259951016 11.070298048545641  0.8827018259951016 11.251048164046065  C 0.8827018259951016 11.63741737387746  1.1959159560074557 11.950631503889813  1.5822851658388517 11.950631503889813  C 1.7630352861166294 11.950631503889813  1.9367705362875647 11.880673113921148  2.06708333984375 11.755416660156252  L 6.416666660156251 7.405833339843749  L 10.766250000000001 11.75541666015625  C 10.896562778530386 11.880672962288699  11.070297920191107 11.950631257191716  11.251047917347968 11.950631257191716  C 11.637417127179365 11.950631257191716  11.950631257191718 11.637417127179363  11.950631257191718 11.251047917347966  C 11.950631257191718 11.070297920191106  11.880672962288703 10.896562778530384  11.755416660156252 10.76625  L 7.405833339843749 6.416666660156251  L 11.75541666015625 2.0670833398437507  Z "
            fill-rule="nonzero"
            fill="#222222"
            stroke="none"
            transform="matrix(1 0 0 1 274 16 )"
          />
        </g>
      </svg>
      <el-select
        v-model="value2"
        placeholder="审核状态"
        @change="handleSelectChange2"
      >
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- <svg
          version="1.1"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="16px"
          height="16px"
          xmlns="http://www.w3.org/2000/svg"
          style="position: absolute; top: 12px; left: 727px"
        >
          <g transform="matrix(1 0 0 1 -326 -206 )">
            <path
              d="M 4.800000000000011 0  L 11.199999999999989 0  C 13.888000000000034 0  16 2.1119999999999663  16 4.800000000000011  L 16 11.199999999999989  C 16 13.888000000000034  13.888000000000034 16  11.199999999999989 16  L 4.800000000000011 16  C 2.1119999999999663 16  0 13.888000000000034  0 11.199999999999989  L 0 4.800000000000011  C 0 2.1119999999999663  2.1119999999999663 0  4.800000000000011 0  Z M 5.878431370404428 9.520941176470615  C 7.047452823623132 10.689671863334638  8.942553226651341 10.689507997869498  10.111372546874975 9.520575162683826  C 10.672538855529808 8.959314145521034  10.98779084466912 8.198137688988083  10.98779084466912 7.404461712687976  C 10.98779084466912 5.751534822995836  9.647828848331812 4.411572826658585  7.99490195863973 4.411572826658585  C 6.34197506894759 4.411572826658585  5.002013072610282 5.751534822995836  5.002013072610282 7.404461712687976  C 5.002013072610282 8.198137688988083  5.317265061749595 8.959680159307823  5.878431370404428 9.520941176470615  Z M 11.4700130726103 10.877751633272055  C 11.546520052953213 10.801339921736144  11.589509244677743 10.697646204136504  11.589509244677743 10.589516339154386  C 11.589509244677743 10.481386474172325  11.546520052953213 10.377692756572685  11.4700130726103 10.301281045036774  L 10.89171241544119 9.723712415441184  C 10.81558161158074 9.650308409972183  10.713948800610922 9.609292182460877  10.60819414437617 9.609292182460877  C 10.382602067739413 9.609292182460877  10.199723556140896 9.792170694059394  10.199723556140896 10.017762770696152  C 10.199723556140896 10.12351742850484  10.240739784869902 10.225150240861012  10.314143792279424 10.301281045036774  L 10.89171241544119 10.879215688419094  C 11.051344674790016 11.038711300875946  11.310380813261474 11.037247245728906  11.4700130726103 10.877751633272055  Z M 9.611764705882365 5.787973854779409  C 10.040877702535909 6.2169334811792965  10.281963770934453 6.798819646175048  10.281963770934453 7.405568626378681  C 10.281963770934453 8.012317606582258  10.040877702535909 8.594203771578066  9.611764705882365 9.023163397977953  C 9.1827024592601 9.452152744258342  8.60081292422683 9.693150322150757  7.994078822087715 9.693150322150757  C 6.730480193688095 9.693150322150757  5.706131112528851 8.66880124099157  5.706131112528851 7.405202612591893  C 5.706131112528851 6.1416039841922725  6.730480193688095 5.117254903033086  7.994078822087715 5.117254903033086  C 8.60081292422683 5.117254903033086  9.1827024592601 5.35898450849902  9.611764705882365 5.787973854779409  Z "
              fill-rule="nonzero"
              fill="#d7d7d7"
              stroke="none"
              transform="matrix(1 0 0 1 326 206 )"
            />
          </g>
        </svg> -->
      <svg
        version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="12px"
        height="12px"
        xmlns="http://www.w3.org/2000/svg"
        style="position: absolute; left: 1250px; top: 14px"
        v-show="showIcon2"
        @click="clearInput2"
      >
        <g transform="matrix(1 0 0 1 -274 -16 )">
          <path
            d="M 11.75541666015625 2.0670833398437507  C 12.028491928692468 1.7939012069409621  12.028491928692468 1.3510987930590401  11.75541666015625 1.0779166601562498  C 11.482234529490464 0.804841404635769  11.039432130665782 0.804841404635769  10.76625 1.0779166601562498  L 6.416666660156251 5.4275  L 2.06708333984375 1.0779166601562498  C 1.9367705122323136 0.9526600606387587  1.76303515775892 0.8827015792907824  1.5822849191345325 0.8827015792907824  C 1.1959157093031365 0.8827015792907824  0.8827015792907824 1.1959157093031365  0.8827015792907824 1.5822849191345325  C 0.8827015792907824 1.76303515775892  0.9526600606387587 1.9367705122323136  1.0779166601562498 2.06708333984375  L 5.4275 6.416666660156251  L 1.0779166601562498 10.766250000000001  C 0.9526602122750143 10.896562802585134  0.8827018259951016 11.070298048545641  0.8827018259951016 11.251048164046065  C 0.8827018259951016 11.63741737387746  1.1959159560074557 11.950631503889813  1.5822851658388517 11.950631503889813  C 1.7630352861166294 11.950631503889813  1.9367705362875647 11.880673113921148  2.06708333984375 11.755416660156252  L 6.416666660156251 7.405833339843749  L 10.766250000000001 11.75541666015625  C 10.896562778530386 11.880672962288699  11.070297920191107 11.950631257191716  11.251047917347968 11.950631257191716  C 11.637417127179365 11.950631257191716  11.950631257191718 11.637417127179363  11.950631257191718 11.251047917347966  C 11.950631257191718 11.070297920191106  11.880672962288703 10.896562778530384  11.755416660156252 10.76625  L 7.405833339843749 6.416666660156251  L 11.75541666015625 2.0670833398437507  Z "
            fill-rule="nonzero"
            fill="#222222"
            stroke="none"
            transform="matrix(1 0 0 1 274 16 )"
          />
        </g>
      </svg>
    </div>
    <div class="top2">
      <!-- <el-card v-for="(project, index) in projects" :key="index">
                <img src="@/assets/img/u53.svg" alt="" />
                <span class="span1">Q</span>
                <img
                  src="@/assets/img/u89.svg"
                  alt=""
                  style="position: absolute; top: 244px; left: 20px"
                />
                <span style="position: absolute; top: 242px; left: 50px"
                  >计划投资额 (万)</span
                >
  
                <img
                  src="@/assets/img/u78.svg"
                  alt=""
                  style="position: absolute; top: 282px; left: 20px"
                />
                <span style="position: absolute; top: 282px; left: 50px"
                  >计划完成时间</span
                >
                <span style="position: absolute; top: 282px; left: 248px">{{
                  project.time
                }}</span>
                <img
                  src="@/assets/img/u88.svg"
                  alt=""
                  style="position: absolute; top: 320px; left: 20px"
                />
                <span style="position: absolute; top: 320px; left: 50px"
                  >项目管理员</span
                >
                <span style="position: absolute; top: 320px; left: 242px">{{
                  project.name
                }}</span>
                <img
                  src="@/assets/img/u79.svg"
                  alt=""
                  style="position: absolute; top: 360px; left: 20px"
                />
                <span style="position: absolute; top: 360px; left: 50px"
                  >项目阶段</span
                >
                <span
                  style="
                    position: absolute;
                    top: 360px;
                    left: 151px;
                    font-size: 14px;
                  "
                  >您还未建立里程碑节点</span
                >
                <img
                  src="@/assets/img/u95.svg"
                  alt=""
                  style="position: absolute; top: 400px; left: 20px"
                />
                <span style="position: absolute; top: 400px; left: 50px"
                  >项目进度</span
                >
                <div
                  style="
                    width: 130px;
                    height: 20px;
                    position: absolute;
                    top: 402px;
                    left: 127px;
                    background-color: rgba(242, 242, 242, 1);
                    border-radius: 8px;
                  "
                ></div>
                <div
                  style="
                    position: absolute;
                    background: blue;
                    width: 12px;
                    height: 18px;
                    top: 403px;
                    left: 129px;
                    border-radius: 8px;
                  "
                ></div>
                <span style="position: absolute; top: 402px; left: 269px"
                  >0%</span
                >
              </el-card> -->
      <el-card v-for="(project, index) in projects" :key="index">
        <div class="info" style="margin-bottom: 15px">
          <img src="@/assets/img/u53.svg" alt="" />
        </div>
        <div class="info1" style="margin-bottom: 15px">
          <img src="@/assets/img/u89.svg" alt="" />
          <span style="margin-left: 10px">计划投资额 (万)</span>
        </div>
        <div class="info2" style="margin-bottom: 15px">
          <img src="@/assets/img/u78.svg" alt="" />
          <span style="margin-left: 10px">计划完成时间</span>
        </div>
        <div class="info3" style="margin-bottom: 15px">
          <img src="@/assets/img/u88.svg" alt="" />
          <span style="margin-left: 10px">项目管理员</span>
          <span style="margin-left: 80px">{{ project.name }}</span>
        </div>
        <div class="info4" style="display: flex; margin-bottom: 15px">
          <img src="@/assets/img/u79.svg" alt="" />
          <span style="margin-left: 10px">项目阶段</span>
          <span style="margin-left: 20px; font-size: 14px"
            >您还未建立里程碑节点</span
          >
        </div>
        <div class="info5" style="display: flex">
          <img src="@/assets/img/u95.svg" alt="" />
          <span style="margin-left: 10px">项目进度</span>
          <div style="position: relative">
            <div
              style="
                background: blue;
                width: 22px;
                position: absolute;
                height: 18px;
                border-radius: 8px;

                left: 16px;
              "
            ></div>
            <div
              style="
                width: 110px;
                height: 20px;
                background-color: rgba(242, 242, 242, 1);
                border-radius: 8px;
                margin-left: 10px;
              "
            ></div>
          </div>
          <span>0%</span>
        </div>
      </el-card>
      <el-button type="text" @click="dialogVisible = true" class="card">
        <img
          src="@/assets/img/添加加号.svg"
          alt=""
          style="width: 50px; height: 50px"
      /></el-button>
      <el-dialog
        title="创建项目"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        :show-close="false"
      >
        <el-form :model="formData">
          <el-form-item label="项目名称">
            <el-input
              placeholder="输入项目名称"
              v-model="formData.people"
            ></el-input>
          </el-form-item>
          <el-form-item label="计划投资额">
            <el-input
              placeholder="输入投资额"
              v-model="formData.money"
            ></el-input>
          </el-form-item>
          <el-form-item label="计划完成时间">
            <el-input
              placeholder="输入完成时间"
              v-model="formData.time"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目管理员">
            <el-input
              placeholder="输入项目管理员"
              v-model="formData.name"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: "",
      showIcon: false,
      showIcon1: false,
      showIcon2: false,
      showIcon6: false,
      dialogVisible: false,
      projects: [], // 用于存储项目的数组
      formData: { name: "", money: "", time: "", people: "" },
      options: [
        {
          value: "选项1",
          label: "李梅里",
          phone: "13800138001",
        },
        {
          value: "选项2",
          label: "张青松",
          phone: "13800138002",
        },
        {
          value: "选项3",
          label: "未轻松",
          phone: "13800138003",
        },
        {
          value: "选项4",
          label: "王大海",
          phone: "13800138004",
        },
        {
          value: "选项5",
          label: "宋青",
          phone: "13800138005",
        },
      ],
      value: "",
      options1: [
        {
          value: "选项1",
          label: "待开始",
        },
        {
          value: "选项2",
          label: "已开始",
        },
        {
          value: "选项3",
          label: "已结束",
        },
      ],
      value1: "",
      options2: [
        {
          value: "选项1",
          label: "待审核",
        },
        {
          value: "选项2",
          label: "通过",
        },
        {
          value: "选项3",
          label: "驳回",
        },
      ],
      value2: "",
    };
  },
  methods: {
    handleConfirm() {
      // 将表单数据作为新项目添加到 projects 数组中
      this.projects.push({
        name: this.formData.name,
        money: this.formData.money,
        // ... 可以添加更多属性，如 time 和 people
      });
      // 重置表单（可选）
      this.formData = {
        name: "",
        money: "",
        time: "",
        people: "",
      };
      // 隐藏对话框
      this.dialogVisible = false;
    },
    handleClose() {},
    clearInput() {
      this.input = "";
      this.showIcon = false;
    },
    handleSelectChange() {
      this.showIcon1 = true;
    },
    clearInput1() {
      this.value1 = "";
      this.showIcon1 = false;
    },
    handleSelectChange2() {
      this.showIcon2 = true;
    },
    clearInput2() {
      this.value2 = "";
      this.showIcon2 = false;
    },
    clearInput6() {
      this.value = "";
      this.showIcon6 = false;
    },
    handleSelectChange6() {
      this.showIcon6 = true;
    },
    goLagen() {
      this.$router.push("/lagen");
    },
  },
};
</script>
<style lang="scss">
.top1 {
  display: flex;
  margin-top: 20px;
  position: relative;
  .el-input {
    width: 300px;
  }
  .el-select .el-input .el-select__caret {
    color: #ffffff;
  }
  .el-input__inner {
    width: 300px;
    height: 50px;
    padding-left: 30px;
    border-radius: 10px;
  }
  // ::v-deep .el-select .el-input .el-select__caret {
  //   color: #ffffff;
  // }
}
.top2 {
  width: 100%;
  height: 250px;
  margin-top: 20px;
  display: flex;
  .el-card {
    // height: 100%;/
    width: 300px;
    height: 250px;
    margin-right: 20px;
    .span1 {
      position: absolute;
      left: 24px;
      top: 205px;
      color: #ffffff;
    }
    ::v-deep .el-card__body {
      height: 100%;
    }
  }
  .card {
    width: 300px;
    height: 250px;
    /* background: red; */
    margin-left: 8px;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    background-color: #ffffff;
  }
}
.el-dialog {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 760px;
  height: 602px;
  background: inherit;
  background-color: rgba(246, 249, 251, 1);
  border: none;
  border-radius: 17px;
  margin-left: 810px;
  .el-dialog__footer {
    display: flex;
    justify-content: center;
  }
  .el-dialog__title {
    display: flex;
    justify-content: center;
  }
  ::v-deep .el-form {
    width: 500px;
    margin: auto;
    .el-form-item__label {
      margin-left: 8px;
    }
  }
}
</style>
